<template>
    <div class="video_main">
        <div class="doc_item">
            <div class="info_l">
                <van-image
                    width="50"
                    round
                    height="50"
                    src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
            </div>
            <div class="info_r">
                <p>
                    <span class="title">沈宁</span>
                    <span class="desc">主任医师 | 内科</span>
                </p>
                <p>中国医科大学附属第一医院</p>
            </div>
        </div>
        <div class="closed_info">
            <span class="title">医生简介：</span>
            <span v-if="!showMore" class="short_title"
                >从事临床与教学工作十几年从事临床与教学工作十几年</span
            >
            <div v-if="showMore" style="color:#666;text-align:justify">
                从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年从事临床与教学工作十几年
            </div>
            <p class="action" @click="showMore = !showMore">
                <van-icon
                    :name="showMore ? 'arrow-up' : 'arrow-down'"
                    size="20"
                    color="#999"
                />
            </p>
        </div>

        <div class="time_main">
            <div class="time_tab">
                <div
                    :class="curIndex == index ? 'tab_item active' : 'tab_item'"
                    @click="curIndex = index"
                    v-for="(res, index) in timeList"
                    :key="index"
                >
                    <span>{{ res.name }}</span>
                    <span>{{ res.date }}</span>
                </div>
            </div>
            <div class="list_main van-hairline--top">
                <div class="list_item">
                    <p>上午</p>
                    <p>可预约 5/15</p>
                    <div>
                        <span>视频问诊费</span>
                        <span class="text_price">7元</span>
                    </div>
                    <div
                        class="main_button"
                        @click="navigateTo('/video-insert')"
                    >
                        预约
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showMore: false,
            curIndex: 0,
            timeList: [
                {
                    name: "周五",
                    date: "12-09"
                },
                {
                    name: "周六",
                    date: "12-10"
                },
                {
                    name: "周日",
                    date: "12-11"
                }
            ]
        };
    },
    methods: {
        navigateTo(path) {
            this.$router.push({
                path
            });
        }
    }
};
</script>

<style lang="less" scoped>
.doc_item .desc {
    margin-left: 10px;
}
.closed_info {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    .title {
        color: #333;
        float: left;
        width: 70px;
    }
    span {
        width: calc(100% - 70px);
        color: #666;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .action {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
}
.time_main {
    margin-top: 20px;
    background: #fff;
    .time_tab {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .tab_item {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            &.active {
                background: #00aac6;
                span {
                    color: #fff;
                }
            }
            span {
                font-size: 14px;
                color: #333;
            }
        }
    }
    .list_main {
        width: 100%;
        margin-top: 10px;
        .list_item {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding: 0 10px;
            box-sizing: border-box;
            p {
                margin: 0;
                margin: 0 10px;
            }
            .text_price {
                color: #fd8119;
                margin-left: 5px;
            }
            .main_button {
                width: 50px;
                height: 24px;
                line-height: 24px;
                color: #fff;
                background: #fd8119;
                text-align: center;
                border-radius: 4px;
            }
        }
    }
}
</style>
